<template>
  <el-form :model="nodeModalForm" ref="nodeModal" label-placement="left" label-width="120px" :rules="nodeModalRules"
    size="small">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="节点名称" prop="nodeName">
          <el-input v-model.trim="nodeModalForm.nodeName">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="列别名" prop="alias">
          <el-input v-model.trim="nodeModalForm.alias">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="列类型" prop="type">
          <el-select v-model="nodeModalForm.type" @change="handleTypeChange" class="w_100" clearable filterable>
            <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="关联列" prop="groupName">
          <el-select v-model="nodeModalForm.groupName" @change="handleGroupNameChange" class="w_100" clearable
            filterable>
            <el-option v-for="item in fieldsList" :key="item.alias" :label="item.alias" :value="item.alias">
              <span style="float: left">{{ item.alias }}</span>
              <span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">{{
                  item.DATA_TYPE
                }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-table :data="nodeModalForm.congroup" border style="width: 100%" height="400" ref="fieldDataRef">
          <el-table-column type="selection" v-if="node.type === 'select'" width="50" />
          <el-table-column align="center" type="index" width="50" label="序号" />
          <el-table-column align="center" property="groupName" label="关联字段" />
          <el-table-column align="center" label="自定义数据" property="alias">
            <template #default="scope">
              <el-input v-if="nodeModalForm.type === 'varchar'" v-model.trim="scope.row.value" clearable>
              </el-input>
              <el-input-number class="input_number_100" v-else-if="nodeModalForm.type === 'int'"
                v-model="scope.row.value">
              </el-input-number>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div class="nodeModal-footer">
      <span class="dialog-footer">
        <el-button plain @click="handleConfigCancel">取消
        </el-button>
        <el-button type="primary" @click="handleConfigConfirm">更新</el-button>
      </span>
    </div>
  </el-form>
</template>

<script>
import { computed, defineComponent, inject, onMounted, ref } from "vue";
import { useEtlStore } from "../../../../../store/flowEtl";
import { etlArrayToTree } from "../../../../../utils/tree";
import { getETLNodeData } from "../../../../../service/data_etl";

export default defineComponent({
  name: "node-config-alias",
  props: {
    node: Object,
  },
  components: {},
  setup(props, ctx) {
    const etlStore = useEtlStore();
    const nodeList = computed(() => etlStore.nodeList);
    const lineList = computed(() => etlStore.lineList);
    const data_etl_id = computed(() => etlStore.data_etl_id);
    const nodeConfigClose = inject("nodeConfigClose");
    const fieldsList = ref([]);
    const nodeModalForm = ref({
      nodeName: "",
      fields: [],
    });
    const propNodeData = ref([]);
    const nodeModal = ref();
    const tableList = ref([]);
    const nodeModalRules = ref({
      nodeName: {
        required: true,
        message: "请输入节点名称",
        trigger: "blur",
      },
      alias: {
        required: true,
        message: "请输入列别名",
        trigger: "blur",
      },
      type: {
        required: true,
        message: "请选择自定义列类型",
        trigger: "blur",
      },
      groupName: {
        required: true,
        message: "请选择关联列",
        trigger: "change",
      },
    });
    const typeList = ref([
      { value: "int", label: "数字类型" },
      { value: "varchar", label: "字符串" },
    ]);
    const handleConfigCancel = () => {
      nodeConfigClose();
    };
    const nodeConfigUpdate = (node) => {
      let findAlias = props.node.originFields.find(
        (item) => item.alias === node.alias
      );
      if (findAlias && findAlias.alias) {
        ElMessage.warning("存在相同的列别名,请修改自定义列别名");
      }
      node.fields = [
        ...props.node.originFields,
        {
          COLUMN_COMMENT: node.alias,
          COLUMN_NAME: node.alias,
          DATA_TYPE: node.type,
          alias: node.alias,
        },
      ];
      let nodes = [...nodeList.value].map((item) => {
        if (item.id === node.id) {
          item.status = true;
          item.nodeName = node.nodeName;
          item.config.fields = node.fields;
          item.config.groupName = node.groupName;
          item.config.congroup = node.congroup;
          item.config.alias = node.alias;
          item.config.type = node.type;
        }
        return item;
      });
      etlStore.setNodeList(nodes);
      nodeConfigClose();
    };
    const handleConfigConfirm = () => {
      nodeModal.value.validate((valid) => {
        if (valid) {
          nodeConfigUpdate(nodeModalForm.value);
        } else {
          return false;
        }
      });
    };
    const resetForm = () => {
      fieldsList.value = [];
      nodeModalForm.value = {
        id: null,
        nodeName: "",
        groupName: "",
        congroup: [],
        alias: "",
        type: "",
      };
    };
    const handleGroupNameChange = () => {
      if (nodeModalForm.value.groupName) {
        let obj = {};
        let groupName = nodeModalForm.value.groupName;
        let groupNameList = propNodeData.value.map((item) => {
          return item[groupName];
        });
        let groupNameListMap = [...new Set(groupNameList)];
        let value = nodeModalForm.value.type === "int" ? 0 : "";
        nodeModalForm.value.congroup = groupNameListMap.map((item) => {
          return {
            groupName: item,
            value,
          };
        });
      }
    };
    const handleTypeChange = () => {
      let value = nodeModalForm.value.type === "int" ? 0 : "";
      nodeModalForm.value.congroup = nodeModalForm.value.congroup.map(
        (item) => {
          return {
            groupName: item.groupName,
            value,
          };
        }
      );
    };
    const getPropNodeData = () => {
      let originLine = [...lineList.value].find(
        (item) => item.to === props.node.id
      );
      let originNode = [...nodeList.value].find(
        (item) => item.id === originLine.from
      );
      let nodeTree = etlArrayToTree(
        lineList.value,
        originNode.id,
        "from",
        "to",
        nodeList.value
      );
      originNode.children = nodeTree;
      getETLNodeData({
        data_etl_id: data_etl_id.value,
        node: JSON.stringify(originNode),
      }).then((res) => {
        propNodeData.value = res.data;
      });
    };
    onMounted(() => {
      resetForm();
      fieldsList.value = props.node.originFields;
      nodeModalForm.value = {
        id: props.node.id,
        nodeName: props.node.nodeName || "",
        fields: props.node.config.fields || [],
        groupName: props.node.config.groupName || "",
        congroup: props.node.config.congroup || [],
        alias: props.node.config.alias || "",
        type: props.node.config.type || "",
      };
      getPropNodeData();
    });
    return {
      nodeList,
      nodeModalForm,
      tableList,
      fieldsList,
      typeList,
      propNodeData,
      nodeModalRules,
      nodeModal,
      nodeConfigClose,
      resetForm,
      handleConfigCancel,
      handleConfigConfirm,
      nodeConfigUpdate,
      handleGroupNameChange,
      handleTypeChange,
    };
  },
});
</script>

<style scoped>
.field-table {
  padding: 0 12px 24px;
}

.nodeModal-footer {
  padding: var(--el-dialog-padding-primary);
  padding-top: 10px;
  text-align: right;
  box-sizing: border-box;
}
</style>